<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建并发布练习</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/practice.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0CB07B',
                        neutral: '#F5F7FA',
                        dark: '#1D2129',
                        light: '#FFFFFF'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .btn-hover {
                transition: all 0.3s ease;
            }
            .btn-hover:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(22, 93, 255, 0.2);
            }
        }
        body {
            background-image: url('/images/background.jpg'); /* 假设图片放在public/images目录下 */
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            background-repeat: no-repeat;
            z-index: -1;  /* 确保低于内容层级 */
        }

            body::before {
                display:none;
            }
            /* 添加下拉菜单样式 */
    #user-dropdown{
        border: 1px solid #e5e7eb;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    #user-dropdown a:hover{
        background-color: #f9fafb;
    }
    body, html {
        margin: 0;
        padding: 0;
    }
    </style>
</head>
<body class="bg-neutral font-inter text-dark">
    <header class="bg-primary text-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa-solid fa-book-open text-white text-2xl"></i>
                <h1 class="text-xl font-bold text-white">在线练习系统</h1>
            </div>
            <nav>
                <ul class="flex space-x-6 items-center">
                    <li><a href="#" class="text-white hover:text-neutral-200 transition-colors duration-300">返回</a></li>
                </ul>
            </nav>
            <div class="flex items-center space-x-3">
                <!-- 修改开始：添加用户信息容器 -->
                <div id="user-info-container" class="hidden text-right mr-2">
                    <div id="user-name" class="font-medium text-white"></div>
                    <div id="student-id" class="text-xs text-white/80"></div>
                </div>
                <!-- 头像区域（添加下拉菜单） -->
                <div class="relative">
                    <a href="#" id="user-avatar" class="text-white hover:text-neutral-200 transition-colors duration-300">
                        <i class="fa-solid fa-user-circle text-xl"></i>
                    </a>
                    <!-- 下拉菜单 -->
                    <div id="user-dropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 hidden">
                        <a href="#" onclick="editProfile()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                            <i class="fas fa-user-edit mr-2"></i>编辑个人资料
                        </a>
                        <a href="#" onclick="logout()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                            <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                        </a>
                    </div>
                </div>
            </div>
    </header>
    <div class="container mx-auto px-4 py-8 max-w-6xl pt-24"> <!-- 添加pt-24或更大的值 -->
        
        <!-- 基本功能区域 - 修改后的按钮组 -->
        <!-- 修改后的基本功能区域 -->
<div class="practice-actions mb-8 flex items-center justify-between">
    <!-- 新增引导文本框 -->
    <div class="guide-box bg-white/90 border border-blue-200 rounded-lg p-3 shadow-sm max-w-md">
        <div class="flex items-start">
            <i class="fas fa-info-circle text-blue-500 mt-1 mr-2"></i>
            <p class="text-sm text-gray-700">
                请先添加题目或从已有练习导入，再完善练习本身的信息，完成后点击"发布练习"
            </p>
        </div>
    </div>
    
    <div class="flex">
        <button id="viewPracticeBtn" class="btn-primary px-6 py-3 rounded-lg bg-primary text-white font-medium flex items-center gap-2 btn-hover">
            <i class="fa-solid fa-list"></i>
            查看已有练习
        </button>
        <button id="gradePracticeBtn" class="ml-3 bg-secondary text-white px-6 py-3 rounded-lg btn-hover flex items-center">
            <i class="fa-solid fa-check-circle mr-2"></i> 批改练习
        </button>
    </div>
</div>
        
        <!-- 创建练习区域 -->
        <div id="createPracticeSection" class="bg-gradient-to-br from-blue-200/80 to-indigo-200/80 rounded-xl p-6 shadow-md mb-8 border border-blue-100/50 backdrop-blur-sm">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8 p-6 rounded-xl 
            bg-gradient-to-br from-blue-100/70 via-purple-100/70 to-indigo-100/70
            backdrop-blur-sm border border-white/30 shadow-sm">
    <!-- 练习名称 -->
    <div class="form-group">
        <label for="practiceName" class="block text-sm font-medium text-neutral-600 mb-1">练习名称</label>
        <input type="text" id="practiceName" placeholder="请输入练习名称" 
               class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 outline-none transition-all bg-white/80">
    </div>
    
    <!-- 所属课程 -->
    <div class="form-group">
        <label for="practiceCourse" class="block text-sm font-medium text-neutral-600 mb-1">所属课程</label>
        <div class="relative">
            <select id="practiceCourse" 
                    class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 outline-none transition-all bg-white/80 appearance-none">
                <option value="">请选择课程</option>
            </select>
            <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-400 pointer-events-none"></i>
        </div>
    </div>
    
    <!-- 截止时间 -->
    <div class="form-group">
        <label for="deadline" class="block text-sm font-medium text-neutral-600 mb-1">截止时间</label>
        <div class="relative">
            <input type="date" id="deadline" 
                   class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 outline-none transition-all bg-white/80">
            <i class="far fa-calendar absolute right-3 top-3 text-gray-400 pointer-events-none"></i>
        </div>
    </div>
    
    <!-- 提交次数 -->
    <div class="form-group">
        <label for="submitTimes" class="block text-sm font-medium text-neutral-600 mb-1">提交次数</label>
        <input type="text" id="submitTimes" placeholder="可选，正整数" 
               class="w-full px-4 py-2 border border-neutral-200 rounded-lg focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 outline-none transition-all bg-white/80">
    </div>
</div>

            <!-- 题目表单区域 -->
           <div class="question-forms">
            <!-- 题目操作按钮 -->
            <div class="question-buttons flex flex-wrap gap-3 mb-6">
                <!-- 选择题按钮 - 蓝色渐变 -->
                <button id="addChoiceBtn" class="px-4 py-2.5 rounded-lg bg-gradient-to-r from-blue-500 to-blue-600 text-white font-medium flex items-center gap-2 
                    hover:from-blue-600 hover:to-blue-700 transition-all duration-300 shadow-sm hover:shadow-md active:scale-[0.98]">
                    <i class="fa-solid fa-list-ul text-white/90"></i>
                    添加选择题
                </button>
                
                <!-- 填空题按钮 - 紫色渐变 -->
                <button id="addFillBtn" class="px-4 py-2.5 rounded-lg bg-gradient-to-r from-purple-500 to-purple-600 text-white font-medium flex items-center gap-2 
                    hover:from-purple-600 hover:to-purple-700 transition-all duration-300 shadow-sm hover:shadow-md active:scale-[0.98]">
                    <i class="fa-solid fa-square text-white/90"></i>
                    添加填空题
                </button>
                
                <!-- 解答题按钮 - 绿色渐变 -->
                <button id="addEssayBtn" class="px-4 py-2.5 rounded-lg bg-gradient-to-r from-green-500 to-green-600 text-white font-medium flex items-center gap-2 
                    hover:from-green-600 hover:to-green-700 transition-all duration-300 shadow-sm hover:shadow-md active:scale-[0.98]">
                    <i class="fa-solid fa-align-left text-white/90"></i>
                    添加解答题
                </button>
                
                <!-- 导入按钮 - 中等灰色渐变 -->
<button id="importBtn" class="px-4 py-2.5 rounded-lg bg-gradient-to-r from-gray-500 to-gray-500 text-gray-800 font-medium flex items-center gap-2 
hover:from-gray-200 hover:to-gray-300 transition-all duration-300 shadow-sm hover:shadow-md border border-gray-400/30 active:scale-[0.98]">
<i class="fa-solid fa-upload text-gray-700"></i>
导入题目
</button>

<!-- 帮助按钮 - 中等蓝色渐变 -->
<button id="importHelpBtn" class="px-4 py-2.5 rounded-lg bg-gradient-to-r from-blue-300 to-blue-300 text-blue-700 font-medium flex items-center gap-2 
hover:from-blue-200 hover:to-blue-300 transition-all duration-300 shadow-sm hover:shadow-md border border-blue-400/30 active:scale-[0.98]">
<i class="fa-solid fa-question-circle text-blue-600"></i>
导入帮助
</button>
            </div>

            <div class="action-buttons flex justify-end gap-3 mt-8">
                <!-- 发布按钮带发光效果 -->
                <button id="publishBtn" class="px-6 py-3 rounded-lg bg-gradient-to-r from-green-500 to-green-600 text-white font-medium flex items-center gap-2 
                    hover:from-green-600 hover:to-green-700 transition-all duration-300 shadow-lg hover:shadow-green-500/30 active:scale-[0.98]
                    relative overflow-hidden after:absolute after:inset-0 after:bg-gradient-to-r after:from-white/10 after:to-white/0 after:opacity-0 
                    hover:after:opacity-100 after:transition-opacity after:duration-300">
                    <i class="fa-solid fa-check text-white/90 relative z-[1]"></i>
                    <span class="relative z-[1]">发布练习</span>
                </button>
                
                <!-- 返回按钮带边框发光 -->
                <button id="backBtn" class="px-6 py-3 rounded-lg bg-white text-gray-700 font-medium flex items-center gap-2 
                    transition-all duration-300 shadow-sm hover:shadow-md border-2 border-gray-200 hover:border-gray-300 active:scale-[0.98]
                    hover:bg-gray-50">
                    <i class="fa-solid fa-arrow-left text-gray-600"></i>
                    返回
                </button>
            </div>

            <!-- 导入题目模态框 -->
            <div id="importPracticeModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 opacity-0 pointer-events-none transition-opacity duration-300">
                <div class="dialog-content bg-white rounded-xl p-6 w-full max-w-md mx-4 transform scale-95 transition-transform duration-300">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-bold text-neutral-600">导入题目</h3>
                        <button id="closeImportPracticeModalBtn" class="text-neutral-400 hover:text-neutral-600">
                            <i class="fa-solid fa-times"></i>
                        </button>
                    </div>
                    <div class="mb-4">
                        <input type="file" id="importPracticeFile" accept=".xlsx" 
                               class="w-full text-sm text-neutral-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-primary file:text-white hover:file:bg-secondary cursor-pointer">
                    </div>
                    <div id="importPracticeLoading" class="hidden flex items-center justify-center py-4">
                        <div class="animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-primary mr-2"></div>
                        <span>加载中...</span>
                    </div>
                    <div class="dialog-actions flex justify-end gap-3 pt-4 border-t border-neutral-200">
                        <button id="confirmPracticeImport" class="px-4 py-2 rounded-lg bg-primary text-white font-medium btn-hover">确认导入</button>
                        <button id="cancelPracticeImport" class="px-4 py-2 rounded-lg bg-neutral-200 text-neutral-600 font-medium btn-hover">取消</button>
                    </div>
                </div>
            </div>
            
            <!-- 选择题表单 -->
            <div id="choiceQuestionSection" class="question-section hidden bg-gradient-to-br from-blue-200/30 to-purple-200/30 rounded-xl p-6 mb-6 transition-all duration-300 shadow-sm hover:shadow-md border border-gray-200/50 backdrop-blur-sm">
    <!-- 标题区域 -->
    <div class="flex justify-between items-center mb-6">
        <h4 class="text-xl font-bold text-gray-800 flex items-center gap-2">
            <i class="fa-solid fa-list-ul text-blue-500"></i>
            添加选择题
        </h4>
        <span class="text-xs font-semibold bg-blue-100/80 text-blue-600 px-3 py-1.5 rounded-full flex items-center gap-1">
            <i class="fa-solid fa-bolt text-blue-500 text-[0.8em]"></i>
            客观题
        </span>
    </div>

    <!-- 题目内容 -->
    <div class="form-group mb-6">
        <label class="block text-sm font-medium text-gray-600 mb-2 flex items-center">
            <i class="fa-solid fa-pencil-alt text-gray-400 mr-2 text-[0.9em]"></i>
            题目内容：
        </label>
        <textarea id="choiceQuestion" rows="3" placeholder="请输入题目内容..."
                class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-200 focus:border-blue-400 outline-none transition-all duration-200 resize-none
                hover:border-gray-300 shadow-sm"></textarea>
    </div>

    <!-- 选项区域 -->
    <div class="options-group grid grid-cols-1 md:grid-cols-2 gap-5 mb-6">
        <!-- 选项A -->
        <div class="form-group relative">
            <label class="flex items-center text-sm font-medium text-gray-600 mb-2">
                <span class="w-6 h-6 flex items-center justify-center bg-blue-500 text-white rounded-full mr-2 text-xs">A</span>
                选项内容：
            </label>
            <div class="relative">
                <input type="text" id="optionA" placeholder="输入选项A内容"
                       class="w-full pl-11 pr-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-200 focus:border-blue-400 outline-none transition-all
                       hover:border-gray-300 shadow-sm">
                <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">→</span>
            </div>
        </div>
        
        <!-- 其他选项结构相同，仅修改ID和字母标识 -->
        <!-- 选项B -->
        <div class="form-group relative">
            <label class="flex items-center text-sm font-medium text-gray-600 mb-2">
                <span class="w-6 h-6 flex items-center justify-center bg-purple-500 text-white rounded-full mr-2 text-xs">B</span>
                选项内容：
            </label>
            <div class="relative">
                <input type="text" id="optionB" placeholder="输入选项B内容"
                       class="w-full pl-11 pr-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-200 focus:border-purple-400 outline-none transition-all
                       hover:border-gray-300 shadow-sm">
                <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></span>
            </div>
        </div>
        
        <!-- 选项C -->
        <div class="form-group relative">
            <label class="flex items-center text-sm font-medium text-gray-600 mb-2">
                <span class="w-6 h-6 flex items-center justify-center bg-green-500 text-white rounded-full mr-2 text-xs">C</span>
                选项内容：
            </label>
            <div class="relative">
                <input type="text" id="optionC" placeholder="输入选项C内容"
                       class="w-full pl-11 pr-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-green-200 focus:border-green-400 outline-none transition-all
                       hover:border-gray-300 shadow-sm">
                <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></span>
            </div>
        </div>
        
        <!-- 选项D -->
        <div class="form-group relative">
            <label class="flex items-center text-sm font-medium text-gray-600 mb-2">
                <span class="w-6 h-6 flex items-center justify-center bg-amber-500 text-white rounded-full mr-2 text-xs">D</span>
                选项内容：
            </label>
            <div class="relative">
                <input type="text" id="optionD" placeholder="输入选项D内容"
                       class="w-full pl-11 pr-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-amber-200 focus:border-amber-400 outline-none transition-all
                       hover:border-gray-300 shadow-sm">
                <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></span>
            </div>
        </div>
    </div>

    <!-- 答案与分值 -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-6">
        <!-- 正确答案选择 -->
        <div class="form-group">
            <label class="block text-sm font-medium text-gray-600 mb-2 flex items-center">
                <i class="fa-solid fa-check-circle text-gray-400 mr-2 text-[0.9em]"></i>
                正确答案：
            </label>
            <div class="relative">
                <select id="correctChoice" 
                        class="w-full pl-9 pr-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-200 focus:border-blue-400 outline-none transition-all
                        hover:border-gray-300 shadow-sm appearance-none bg-white bg-[url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e")] bg-no-repeat bg-[right_0.5rem_center] bg-[length:1.5em]">
                    <option value="A">A</option>
                    <option value="B">B</option>
                    <option value="C">C</option>
                    <option value="D">D</option>
                </select>
                <i class="fa-solid fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
            </div>
        </div>
        
        <!-- 分值设置 -->
        <div class="form-group">
            <label class="block text-sm font-medium text-gray-600 mb-2 flex items-center">
                <i class="fa-solid fa-star text-gray-400 mr-2 text-[0.9em]"></i>
                分值：
            </label>
            <div class="relative">
                <input type="number" id="choiceScore" min="1" value="1" placeholder="设置分值"
                       class="w-full pl-9 pr-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-200 focus:border-blue-400 outline-none transition-all
                       hover:border-gray-300 shadow-sm appearance-none">
                <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></span>
            </div>
        </div>
    </div>

    <!-- 操作按钮 -->
    <div class="form-actions flex justify-end gap-3 pt-5 border-t border-gray-200">
        <button id="submitChoiceBtn" class="px-5 py-2.5 rounded-lg bg-gradient-to-r from-blue-500 to-blue-600 text-white font-medium flex items-center gap-2
            hover:from-blue-600 hover:to-blue-700 transition-all duration-300 shadow-md hover:shadow-lg active:scale-[0.98]">
            <i class="fa-solid fa-check text-white/90"></i>
            确认添加
        </button>
        <button id="canceladdChoiceBtn" class="px-5 py-2.5 rounded-lg bg-gradient-to-r from-gray-100 to-gray-200 text-gray-700 font-medium flex items-center gap-2
            hover:from-gray-200 hover:to-gray-300 transition-all duration-300 shadow-sm hover:shadow-md border border-gray-300/50 active:scale-[0.98]">
            <i class="fa-solid fa-times text-gray-600"></i>
            取消
        </button>
    </div>
</div>

            <!-- 填空题表单 -->
            <div id="fillQuestionSection" class="question-section hidden bg-gradient-to-br from-amber-200/30 to-blue-200/30 rounded-xl p-6 mb-6 transition-all duration-300 shadow-sm hover:shadow-md border border-gray-200/50 backdrop-blur-sm">
                <!-- 标题区域 -->
                <div class="flex justify-between items-center mb-6">
                    <h4 class="text-xl font-bold text-gray-800 flex items-center gap-2">
                        <i class="fa-solid fa-pen-to-square text-amber-500"></i>
                        添加填空题
                    </h4>
                    <span class="text-xs font-semibold bg-blue-100/80 text-blue-600 px-3 py-1.5 rounded-full flex items-center gap-1">
                        <i class="fa-solid fa-bolt text-blue-500 text-[0.8em]"></i>
                        客观题
                    </span>
                </div>
            
                <!-- 题目内容 -->
                <div class="form-group mb-6">
                    <label class="block text-sm font-medium text-gray-600 mb-2 flex items-center">
                        <i class="fa-solid fa-pencil-alt text-gray-400 mr-2 text-[0.9em]"></i>
                        题目内容（用 __ 表示填空位置）：
                    </label>
                    <textarea id="fillQuestion" rows="3" placeholder="例如：中国的首都是__，长江的长度是__千米"
                            class="w-full px-4 py-3 bg-white/90 border border-gray-200/70 rounded-lg focus:ring-2 focus:ring-amber-200 focus:border-amber-400 outline-none transition-all duration-200 resize-none hover:border-gray-300 shadow-sm"></textarea>
                </div>
            
                <!-- 答案容器 -->
                <div id="blankAnswers" class="blank-answers-container space-y-4 mb-6"></div>
            
                <!-- 操作按钮 -->
                <div class="form-actions flex justify-end gap-3 pt-5 border-t border-gray-200/70">
                    <button id="submitFillBtn" class="px-5 py-2.5 rounded-lg bg-gradient-to-r from-amber-500 to-amber-600 text-white font-medium flex items-center gap-2 hover:from-amber-600 hover:to-amber-700 transition-all duration-300 shadow-md hover:shadow-lg active:scale-[0.98]">
                        <i class="fa-solid fa-check text-white/90"></i>
                        确认添加
                    </button>
                    <button id="canceladdFillBtn" class="px-5 py-2.5 rounded-lg bg-gradient-to-r from-gray-100 to-gray-200 text-gray-700 font-medium flex items-center gap-2 hover:from-gray-200 hover:to-gray-300 transition-all duration-300 shadow-sm hover:shadow-md border border-gray-300/50 active:scale-[0.98]">
                        <i class="fa-solid fa-times text-gray-600"></i>
                        取消
                    </button>
                </div>
            </div>

            <!-- 解答题表单 -->
<div id="essayQuestionSection" class="question-section hidden bg-gradient-to-br from-blue-200/30 to-yellow-200/30 rounded-xl p-6 mb-6 transition-all duration-300 shadow-sm hover:shadow-md border border-amber-200/50 backdrop-blur-sm">
    <!-- 标题区域 -->
    <div class="flex justify-between items-center mb-6">
        <h4 class="text-xl font-bold text-gray-800 flex items-center gap-2">
            <i class="fa-solid fa-file-pen text-amber-600"></i>
            添加解答题
        </h4>
        <span class="text-xs font-semibold bg-amber-100/80 text-amber-600 px-3 py-1.5 rounded-full flex items-center gap-1">
            <i class="fa-solid fa-feather-pointed text-amber-500 text-[0.8em]"></i>
            主观题
        </span>
    </div>

    <!-- 题目内容 -->
    <div class="form-group mb-6">
        <label class="block text-sm font-medium text-gray-600 mb-2 flex items-center">
            <i class="fa-solid fa-pencil-alt text-gray-400 mr-2 text-[0.9em]"></i>
            题目内容：
        </label>
        <textarea id="essayQuestion" rows="5" placeholder="请输入解答题题目内容..."
                class="w-full px-4 py-3 bg-white/90 border border-gray-200/70 rounded-lg focus:ring-2 focus:ring-amber-200 focus:border-amber-400 outline-none transition-all duration-200 resize-none hover:border-gray-300 shadow-sm"></textarea>
    </div>

    <!-- 分值设置 -->
    <div class="form-group mb-6">
        <label class="block text-sm font-medium text-gray-600 mb-2 flex items-center">
            <i class="fa-solid fa-star text-gray-400 mr-2 text-[0.9em]"></i>
            分值：
        </label>
        <div class="relative max-w-xs">
            <input type="number" id="essayScore" min="1" value="5" 
                   class="w-full pl-9 pr-4 py-2.5 bg-white/90 border border-gray-200/70 rounded-lg focus:ring-2 focus:ring-amber-200 focus:border-amber-400 outline-none transition-all hover:border-gray-300 shadow-sm">
            <span class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></span>
        </div>
    </div>

    <!-- 操作按钮 -->
    <div class="form-actions flex justify-end gap-3 pt-5 border-t border-amber-200/50">
        <button id="submitEssayBtn" class="px-5 py-2.5 rounded-lg bg-gradient-to-r from-amber-500 to-amber-600 text-white font-medium flex items-center gap-2 hover:from-amber-600 hover:to-amber-700 transition-all duration-300 shadow-md hover:shadow-lg active:scale-[0.98]">
            <i class="fa-solid fa-check text-white/90"></i>
            确认添加
        </button>
        <button id="canceladdEssayBtn" class="px-5 py-2.5 rounded-lg bg-gradient-to-r from-gray-100 to-gray-200 text-gray-700 font-medium flex items-center gap-2 hover:from-gray-200 hover:to-gray-300 transition-all duration-300 shadow-sm hover:shadow-md border border-gray-300/50 active:scale-[0.98]">
            <i class="fa-solid fa-times text-gray-600"></i>
            取消
        </button>
    </div>
</div>
            </div>


        </div>
        
        <!-- 已添加题目展示区 -->
<div class="added-questions bg-gradient-to-br from-blue-400/75 to-blue-500/75 rounded-xl p-6 shadow-lg mb-8 backdrop-blur-sm border border-blue-500/20">
    <div class="flex justify-between items-center mb-6">
        <h3 class="text-xl font-bold text-white flex items-center gap-2">
            <i class="fa-solid fa-list-check text-blue-200"></i>
            已添加题目
        </h3>
        <div id="totalScoreContainer" class="text-sm font-medium bg-blue-500/20 text-blue-100 px-4 py-1.5 rounded-full border border-blue-400/30 flex items-center gap-1">
            <i class="fa-solid fa-star text-yellow-300"></i>
            <span>总分：<span class="font-bold">0</span>分</span>
        </div>
    </div>
    <div id="questionsContainer" class="questions-list space-y-4"></div>
</div>
    </div>

    <footer class="bg-dark text-white py-8 mt-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <h3 class="text-lg font-semibold mb-4">在线练习系统</h3>
                    <p class="text-gray-400">提供高质量的在线练习服务，帮助学生提升学习效果。</p>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">联系我们</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><i class="fa-solid fa-envelope mr-2"></i> softclass-platform@qq.com</li>
                        <li><i class="fa-solid fa-phone mr-2"></i> 114-514-1919-810</li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">关注我们</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa-brands fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa-brands fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa-brands fa-github text-xl"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>© 2025 软课程管理平台 版权所有</p>
            </div>
        </div>
    </footer>
    <script src="./js/practice.js" type="module"></script>
</body>
</html>    